<template>
	<view class="container">
		<!-- <view class="wind">
			<ul>
				<li v-for="(item, index) in list" :key="index">
					{{item}}
				</li>
			</ul>
		</view>
		<input type="text" v-model="content" class="border"/>
		<button type="default" @tap="but">点击</button> -->
		<view class="di">
			<text>新手村</text>
			<text id="login" @tap="login">登录</text>
		</view>
		<view class="gao" style="height: 200rpx;border: 1px solid #007AFF;overflow: auto;">
			<view class="" v-if="gao.length === 0">
				<text>暂无玩家</text>
			</view>
			<view class="" v-else>
				<view class="" v-for="(item,index) in gao" :key="index">
					新玩家:{{item.name}} 选择 {{item.zheye}} 来到新手村
				</view>
			</view>
		</view>
		<view class="sha" style="height: 100rpx;border: 1px solid #007AFF;">
			<text>{{str}}</text>
		</view>
		<view class="jiao">
			<text>
				玩家:{{name}}
			</text>
			<text>体力:{{ti}}点</text>
			<text>级别:{{jie}}级</text>
			<text>血量:{{she}}点</text>
			<text>攻击:{{gong}}点</text>
			<text>{{jing}}/{{total}}经验</text>
		</view>
		<view class="zhi">
			<view @tap="choose(item,name)" class="text" v-for="(item,index) in text" :key="index">
			{{item}}
			</view>
		</view>
		<view class="guan">
			<text>第一关</text>
			<text>第二关</text>
			<view v-if="guan[0].name.length > 0">
				<view class="" v-for="(item,index) in guan" :key="index">
					<view style="margin: 10rpx;">进入{{item.id}}关</view>
					 <view class="guaiwu">
						 <text v-for="(i,ind) in item.name" :key="ind">
						 	<text>怪物:{{i.name}}</text>
						 	<text>血量:{{i.xue}}</text>
						 	<text>攻击:{{i.gong}}</text>
						 	<text>捕捉:{{i.zhua?'可捕捉':'不可捕捉'}}</text>
							<text style="color: #F0AD4E;" @tap="sha(index,i.name)">杀</text>
						 </text>
					 </view>
				</view>
			</view>
			<view v-else>
				<text>{{titleShow}}</text>
				<text>一分钟以后刷新</text>
				<text>当前时间：{{data}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {time, npcFresch} from '../../commonjs/utils.js'
	export default {
		data() {
			return {
				str: '',
				data: '',
				titleShow: '野怪已击杀',
				gao:[],
				guan: [
				{
					id:1,
					name:[
						{
							id:1,
							name:'青蛙',
							xue: 4,
							zhua: true,
							gong: 1,
						},
						{
							id:2,
							name:'蝴蝶',
							xue: 4,
							gong: 1,
							zhua: false
						}
					]
				}
				],
				str: '',
				name:'韩立',
				jie: '1',
				she: '10',
				gong: '1',
				jing: 0,
				total: 10,
				ti:'24',
				text:['法师','战士','辅助'],
				content: '',
				list: [],
				endTime: 60,
				end: null,
				b: "",
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		created() {
			setInterval(()=>{
				this.data = time()
			},1000)
		},
		destroyed () {
			this.data = null
		},
		onLoad(route) {
			console.log(route)
			this.b = route.name
			this.get()
			this.getChoose()
			this.getSha()
			this.getb()
			if (typeof route.name === 'undefined') return
			this.name = route.name
		},
		watch: {
			endTime: function(val) {
				if (val !== 0) return
			    let num = Math.round(1+Math.random()*100)
				this.guan[0].name[0] = npcFresch()
				this.endTime = 60
				clearInterval(this.end)
				this.$forceUpdate()
			}
		},
		methods: {
			getb () {
				this.$socket.on(this.b, (data) => {
					console.log(data)
				})
			},
			login () {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			getSha () {
				this.$socket.on('sha', data=>{
					console.log(data)
					this.str = data
				})
			},
			sha (index,name) {
				this.$socket.emit('sha',this.name+'正在击杀'+name)
				this.str = this.name+'正在击杀'+name
				this.ti--
				
				let ind = this.guan[index].name.findIndex(x=>{
					return x.name === name
				})
				if (ind >=0) {
					let xue = this.guan[index].name[ind].xue
					console.log(xue)
					this.guan[index].name[ind].xue = xue - this.gong
					if (this.guan[index].name[ind].xue === 0) {
						this.$socket.emit('sha',this.name+'击杀'+name)
						uni.showToast({
							title: `${name}已被击杀`
						})
						this.guan[index].name.splice(ind,1)
						
						if(this.guan[index].name.length === 0) {
							this.end = setInterval(()=>{
								this.endTime--
							},1000)
							
						}
						return
					}
					this.she = this.she - this.guan[index].name[ind].gong
				}
				console.log(ind)
			},
			choose (item,name) {
				this.gao.push({
					name:name,
					zheye: item
				})
				this.$socket.emit('gao',{name:name,zheye:item})
			},
			getChoose () {
				this.$socket.on('bao', data=>{
					this.gao.push(data)
				})
			},
			but: function () {
				this.$socket.emit('message', this.content)
				this.list.push(this.content)
			},
			get: function () {
				let msg = this.$socket.on('gbmsg', data => {
					this.list.push(data)
				})
				
			}
		}
	}
</script>

<style lang="less">
	.guan {
		color: #007AFF;
		font-size: 32rpx;
		text {
			border-bottom: 1px solid #007AFF;
			margin: 10rpx;
			font-size: 1em;
		}
		.guaiwu{
			display:flex;
			flex-wrap:wrap;
			font-size: 1em;
		}
	}
	.di {
		display: flex;
		justify-content: center;
		.login {
			color: #007AFF;
		}
	}
	.jiao {
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
	}
	.zhi{
		display: flex;
		.text {
			margin: 15rpx;
			color: #007AFF;
			border-bottom: 1px solid #007AFF;
		}
	}
	.border {
		border: 1px solid #007AFF;
	}
	.wind {
		height: 200rpx;
	}
</style>
